<template>
  <main class="decision_model_train_container">
    <header class="flex flex-between header">
      <h2>模型训练/任务决策模型</h2>
      <p class="flex flex-between" @click="goBack">
        <i class="el-icon-back"></i>
        返回
      </p>
    </header>
    <header class="flex flex-between">
      <div class="flex" style="color: #fff;">
        <el-button
          type="primary"
          size="small"
          style="margin-right:10px"
          @click="onSubmit('选择训练集')"
          >选择训练集</el-button
        >
        <el-input
          size="small"
          style="margin: 0 10px"
          v-model="trainName"
          readonly
        ></el-input>
        <el-button type="primary" size="small" @click="onSubmit('选择测试集')"
          >选择测试集</el-button
        >
        <el-input
          size="small"
          style="margin: 0 10px"
          v-model="testName"
          readonly
        ></el-input>
      </div>
      <el-form
        :inline="true"
        :model="formInline"
        class="demo-form-inline"
        size="small"
      >
        <el-form-item>
          <el-button
            type="primary"
            @click="handleModalSave"
            :disabled="isModelSave"
            >模型保存</el-button
          >
          <el-button
            type="primary"
            :disabled="startMxStaut"
            @click="startedTraining"
            >训练及评估</el-button
          >
        </el-form-item>
      </el-form>
    </header>
    <main class="table_container">
      <el-row :gutter="20">
        <el-col :xs="24" :sm="24" :lg="18">
          <div id="topCharts" class="chartItem"></div>
        </el-col>
        <el-col :xs="24" :sm="24" :lg="6">
          <div class="informationStatistics flex-between flex">
            <div class="circle">
              <p class="statistical_num">{{ SingleAveragePrecisionRate }}</p>
              <p class="title">单条平均精准率</p>
            </div>
            <div class="circle">
              <p class="statistical_num">{{ OverallAccuracy }}</p>
              <p class="title">总体准确率</p>
            </div>
            <div class="circle">
              <p class="statistical_num">{{ DecisionSpeed }}</p>
              <p class="title">决策速度</p>
            </div>
            <div class="circle">
              <p class="statistical_num">{{ TrainingTime }}</p>
              <p class="title">训练耗时</p>
            </div>
          </div>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="24">
          <div id="BottomCharts" class="chartItem"></div>
        </el-col>
      </el-row>
    </main>
    <proces
      :dialogTitle="dialogTitle"
      ref="procesRef"
      @completeCallback="completeCallback"
    ></proces>

    <save-model ref="modelRef" @decisionCallback="decisionCallback" />
  </main>
</template>

<script src="./index.js"></script>
<style lang="scss" src="./index.scss" scoped></style>
